<template>
  <el-drawer
    v-model="_visible"
    :close-on-click-modal="false"
    direction="rtl"
    :size="size"
    :custom-class="customClass"
    @close="close"
  >
    <template #title>
      <drawer-title :title="title" />
    </template>
    <slot></slot>
  </el-drawer>
</template>

<script lang="ts" setup>
import { computed, defineEmits, defineProps } from 'vue'

import DrawerTitle from '@/components/MainTitle/index.vue'

const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
  title: {
    type: String,
    default: '',
  },
  customClass: {
    type: String,
    default: 'form-drawer',
  },
  size: {
    type: [String, Number],
    default: 1000,
  },
})

const emits = defineEmits(['update:visible', 'close'])

const _visible = computed({
  get() {
    return props.visible
  },
  set(val) {
    emits('update:visible', val)
  },
})

const close = () => {
  emits('close')
}
</script>
